<template>
	<view class="container">
		<star-nav title="公告中心" :type="3" icon="/static/myimages/m13.png"></star-nav>
		<view style="width: 100%;height: 30rpx;"></view>
		<view class="conter">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view v-if="list.length>0" class="block" v-for="(item,index) in list" :key="index" @click="handleItem(item)">
					<view class="ds">
						<view class="ggTitle">{{item.title || '公告'}}</view>
						<view class="ggDate">{{item.createTime}}</view>
					</view>
					<view class="nl">
						<rich-text :nodes="item.content"></rich-text>
					</view>
				</view>
				<view v-if="list.length==0" class="none">
					暂无信息
				</view>
			</scroll-view>
		</view>
		<star-notice ref="notiveRef" :show="noneShow" @success="noneShow = false"></star-notice>
	</view>
</template>

<script>
	import {
		annOunListPage
	} from '@/api/my.js'
	export default {
		data() {
			return {
				noneShow:false,
				scrollTop: 0,
				params: {
					pageNo: 1,
					pageSize: 20
				},
				list: [],
				total: 0
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			handleItem(item){
				this.$refs.notiveRef.getNone(item.id)
				this.noneShow = true
			},
			async getList() {
				let res = await annOunListPage(this.params)
				this.total = res.data.total
				this.list = [...this.list, ...res.data.records]
			},
			lower() {
				if (this.list.length < this.total) {
					this.params.pageNo++
					this.getList()
				}
			}
		}
	}
</script>

<style scoped>
	.none {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		opacity: 0.8;
	}

	.ggDate {
		color: #FFFFFF;
		opacity: 0.6;
		font-size: 28rpx;
	}

	.ggTitle {
		font-size: 34rpx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.ds {
		width: 590rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nl {
		width: 590rpx;
		height: 40rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		color: #FFFFFF;
		opacity: 0.7;
		line-height: 1.4;

	}

	.scroll-Y {
		width: 700rpx;
		max-height: calc(100vh - 330rpx);
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.block {
		margin-left: 25rpx;
		margin-bottom: 30rpx;
		width: 650rpx;
		height: 165rpx;
		background-color: #1E2A3B;
		border-radius: 30rpx;
		border: 4rpx solid #29334D;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.conter {
		width: 710rpx;
		max-height: calc(100vh - 230rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		box-sizing: border-box;
		background-color: #1E283F;
		border: 4rpx solid #29334D;
		border-radius: 30rpx;
		margin: 0 auto;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}

	page {
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}
</style>